<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet/less" href="./common.less"><!--公共样式，清除样式 -->
  <link rel="stylesheet/less" href="./index.less" /><!--独自样式 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/less@4"></script> -->
  <script src="./assets/less-4.1.3.js"></script>
  <title>首页</title>
</head>

<body>

  <header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="./assets/logo.png" alt="Logo" class="d-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" href="./index.html">首页</a>
            <a class="nav-link" href="./about">关于我们</a>
            <a class="nav-link" href="./product">产品中心</a>
            <a class="nav-link" href="./appointment">预约设计</a>
            <a class="nav-link" href="./news">新闻资讯</a>
            <a class="nav-link" href="./service">服务平台</a>
            <a class="nav-link" href="./contact">联系我们</a>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <div class="banner">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./assets/home/banner.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./assets/home/banner.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./assets/home/banner.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <!-- LIVING -->
  <div class="living">
    <div class="head">
      <div class="container">
        <h1 class="text-center">ZEST HOME & LIVING</h1>
        <div>恣在家生活馆</div>
        <span>GIVE YOU A COMFORTABLE HOME</span>
      </div>
    </div>
    <div id="carouselExampleIndicators2" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1">简约美式</button>
        <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="1"
          aria-label="Slide 2">田园休闲</button>
        <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="2"
          aria-label="Slide 3">清新法式</button>
        <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="3"
          aria-label="Slide 4">现代都市</button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./assets/home/living1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living1.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators2"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators2"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>

  <!-- LIVING DESIGN -->
  <div class="living_design">
    <div class="head">
      <div class="container">
        <h1 class="text-center">ZEST HOME & LIVING DESIGN</h1>
        <div>恣在家生活馆</div>
        <span>GIVE YOU A COMFORTABLE HOME</span>
      </div>
    </div>
    <div class="container">
      <div class="row pic">
        <div class="col-lg-2 col-md-2 col-sm-1"></div>
        <div class="col-lg-2 col-md-4 col-sm-5 col-4 mx-auto  mb-4 ">
          <img src="./assets/home/living_design1.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-5 col-4 mx-auto">
          <img src="./assets/home/living_design2.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-2 col-sm-1 d-lg-none"></div>
        <div class="col-md-2 col-sm-1 d-lg-none"></div>
        <div class="col-lg-2 col-md-4 col-sm-5 col-4 mx-auto">
          <img src="./assets/home/living_design3.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-5 col-4 mx-auto">
          <img src="./assets/home/living_design4.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1"></div>
      </div>
    </div>
  </div>

  <!-- LIVING NEWS -->
  <div class="living_news">
    <div class="head">
      <div class="container">
        <h1 class="text-center">ZEST HOME & LIVING NEWS</h1>
        <div>恣在家生活馆</div>
        <span>GIVE YOU A COMFORTABLE HOME</span>
      </div>
    </div>
    <div id="carouselExampleIndicators3" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators3" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1">品牌咨询</button>
        <button type="button" data-bs-target="#carouselExampleIndicators3" data-bs-slide-to="1"
          aria-label="Slide 2">热门观点</button>
        <button type="button" data-bs-target="#carouselExampleIndicators3" data-bs-slide-to="2"
          aria-label="Slide 3">家居动态</button>
        <button type="button" data-bs-target="#carouselExampleIndicators3" data-bs-slide-to="3"
          aria-label="Slide 4">精彩视频</button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./assets/home/living_news1.png" class="d-block w-100" alt="...">
          <!-- 轮播图片里的内容 -->
          <div class="text">
            <div class="left">
              <img src="./assets/home/living_news2.png" class="d-block w-100" alt="...">
              <h6 class="d-none d-md-block d-lg-block">穿越人山人海，我们为造梦而来！</h6>
              <p class="d-none d-lg-block">因为懂中国人对于家深深的执念，所以我们格外珍惜每一次对家的构建；因为见证了太多关于家的 点滴幸福，所以我们了解家之于生活意义非凡。</p>
              <span class="d-none  d-lg-block">了解详情</span>
            </div>
            <div class="right">
              <div class="item d-none d-lg-flex">
                <div class="left">
                  <img src="./assets/home/living_news3.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">2018什么牌子的床垫好？</h6>
                  <p class="d-none d-xl-block">美克家居旗下全新线上品牌恣在家，以个性、时尚、多
                    彩、百搭为核心。其床垫设计符合年轻人的睡...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news4.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">怎么辨别实木家具？ 从这五个方面入手就不会错。</h6>
                  <p class="d-none d-xl-block">实木家具越来越受到大家的欢迎，一方面是因为实木天然环保，
                    另一方面也是因为纯实木对工艺的要求比较高...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news5.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">想要打造正宗美式风格卧室，照着这些方式搭配...</h6>
                  <p class="d-none d-xl-block">美式风格近几年特别流行，不管是年轻人还是中年人，似乎都
                    对美式情有独钟。不过呢，很多人在装修新家时...</p>
                  <span>了解详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living_news1.png" class="d-block w-100" alt="...">
          <!-- 轮播图片里的内容 -->
          <div class="text">
            <div class="left">
              <img src="./assets/home/living_news2.png" class="d-block w-100" alt="...">
              <h6 class="d-none d-md-block d-lg-block">穿越人山人海，我们为造梦而来！</h6>
              <p class="d-none d-lg-block">因为懂中国人对于家深深的执念，所以我们格外珍惜每一次对家的构建；因为见证了太多关于家的 点滴幸福，所以我们了解家之于生活意义非凡。</p>
              <span class="d-none  d-lg-block">了解详情</span>
            </div>
            <div class="right">
              <div class="item d-none d-lg-flex">
                <div class="left">
                  <img src="./assets/home/living_news3.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">2018什么牌子的床垫好？</h6>
                  <p class="d-none d-xl-block">美克家居旗下全新线上品牌恣在家，以个性、时尚、多
                    彩、百搭为核心。其床垫设计符合年轻人的睡...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news4.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">怎么辨别实木家具？ 从这五个方面入手就不会错。</h6>
                  <p class="d-none d-xl-block">实木家具越来越受到大家的欢迎，一方面是因为实木天然环保，
                    另一方面也是因为纯实木对工艺的要求比较高...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news5.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">想要打造正宗美式风格卧室，照着这些方式搭配...</h6>
                  <p class="d-none d-xl-block">美式风格近几年特别流行，不管是年轻人还是中年人，似乎都
                    对美式情有独钟。不过呢，很多人在装修新家时...</p>
                  <span>了解详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living_news1.png" class="d-block w-100" alt="...">
          <!-- 轮播图片里的内容 -->
          <div class="text">
            <div class="left">
              <img src="./assets/home/living_news2.png" class="d-block w-100" alt="...">
              <h6 class="d-none d-md-block d-lg-block">穿越人山人海，我们为造梦而来！</h6>
              <p class="d-none d-lg-block">因为懂中国人对于家深深的执念，所以我们格外珍惜每一次对家的构建；因为见证了太多关于家的 点滴幸福，所以我们了解家之于生活意义非凡。</p>
              <span class="d-none  d-lg-block">了解详情</span>
            </div>
            <div class="right">
              <div class="item d-none d-lg-flex">
                <div class="left">
                  <img src="./assets/home/living_news3.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">2018什么牌子的床垫好？</h6>
                  <p class="d-none d-xl-block">美克家居旗下全新线上品牌恣在家，以个性、时尚、多
                    彩、百搭为核心。其床垫设计符合年轻人的睡...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news4.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">怎么辨别实木家具？ 从这五个方面入手就不会错。</h6>
                  <p class="d-none d-xl-block">实木家具越来越受到大家的欢迎，一方面是因为实木天然环保，
                    另一方面也是因为纯实木对工艺的要求比较高...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news5.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">想要打造正宗美式风格卧室，照着这些方式搭配...</h6>
                  <p class="d-none d-xl-block">美式风格近几年特别流行，不管是年轻人还是中年人，似乎都
                    对美式情有独钟。不过呢，很多人在装修新家时...</p>
                  <span>了解详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./assets/home/living_news1.png" class="d-block w-100" alt="...">
          <!-- 轮播图片里的内容 -->
          <div class="text">
            <div class="left">
              <img src="./assets/home/living_news2.png" class="d-block w-100" alt="...">
              <h6 class="d-none d-md-block d-lg-block">穿越人山人海，我们为造梦而来！</h6>
              <p class="d-none d-lg-block">因为懂中国人对于家深深的执念，所以我们格外珍惜每一次对家的构建；因为见证了太多关于家的 点滴幸福，所以我们了解家之于生活意义非凡。</p>
              <span class="d-none  d-lg-block">了解详情</span>
            </div>
            <div class="right">
              <div class="item d-none d-lg-flex">
                <div class="left">
                  <img src="./assets/home/living_news3.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">2018什么牌子的床垫好？</h6>
                  <p class="d-none d-xl-block">美克家居旗下全新线上品牌恣在家，以个性、时尚、多
                    彩、百搭为核心。其床垫设计符合年轻人的睡...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news4.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">怎么辨别实木家具？ 从这五个方面入手就不会错。</h6>
                  <p class="d-none d-xl-block">实木家具越来越受到大家的欢迎，一方面是因为实木天然环保，
                    另一方面也是因为纯实木对工艺的要求比较高...</p>
                  <span>了解详情</span>
                </div>
              </div>
              <div class="item">
                <div class="left">
                  <img src="./assets/home/living_news5.png" class="d-block w-100 h-100" alt="...">
                </div>
                <div class="right">
                  <h6 class="d-none d-sm-block">想要打造正宗美式风格卧室，照着这些方式搭配...</h6>
                  <p class="d-none d-xl-block">美式风格近几年特别流行，不管是年轻人还是中年人，似乎都
                    对美式情有独钟。不过呢，很多人在装修新家时...</p>
                  <span>了解详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators3"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators3"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>

  <!-- LIVING SERVICE -->
  <div class="living_service">
    <div class="head">
      <div class="container">
        <h1 class="text-center">ZEST HOME & LIVING SERVICE</h1>
        <div>恣在家生活馆</div>
        <span>GIVE YOU A COMFORTABLE HOME</span>
      </div>
    </div>
    <div class="container">
      <p class="title" id="living_service_title">恣在家为用户制定全方位服务与管理体制，满足不同客户人群的需求，注重每个细节的处理， 为您打造温馨舒适的家居生活。</p>
      <div class="row">
        <div class="item col-lg-3 mx-auto">
          <img src="./assets/home/living_service1.png" alt="">
          <h6>理念服务</h6>
          <p>恣在家一贯秉承专业的金保姆服务体系，让 您买得安心用得放心。一次选择，终身受益。</p>
        </div>
        <div class="item col-lg-3 mx-auto">
          <img src="./assets/home/living_service2.png" alt="">
          <h6>服务支持</h6>
          <p>恣在家为用户提供知心、省心、诚心、贴心 的服务支持，让您放心购买。</p>
        </div>
        <div class="item col-lg-3 mx-auto">
          <img src="./assets/home/living_service3.png" alt="">
          <h6>服务承诺</h6>
          <p>恣在家用户可享受免费送货与安装以及全国 联保服务，让您放心使用。</p>
        </div>
      </div>
    </div>
  </div>

  <!-- LIVING CENTER -->
  <div class="living_center">
    <div class="head">
      <div class="container">
        <h1 class="text-center">ZEST HOME & LIVING CENTER</h1>
        <div>恣在家生活馆</div>
        <span>GIVE YOU A COMFORTABLE HOME</span>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="item col-lg-2 col-md-3 col-sm-4 col-6 mx-auto">
          <div class="title">
            <span>轻波</span>
            <span>普风</span>
          </div>
          <div class="hr"></div>
          <div class="text">
            <p>没有强烈的色彩对比 也无需夸张的图案造型 一点几何图形 加上亮丽的色彩 便为无底色的家 注入了更多的鲜活</p>
          </div>
        </div>
        <div class="item col-lg-2 col-md-3 col-sm-4 col-6 mx-auto">
          <div class="title">
            <span>工匠</span>
            <span>精神</span>
          </div>
          <div class="hr"></div>
          <div class="text">
            <p>没有强烈的色彩对比 也无需夸张的图案造型 一点几何图形 加上亮丽的色彩 便为无底色的家 注入了更多的鲜活</p>
          </div>
        </div>
        <div class="item col-lg-2 col-md-3 col-sm-4 col-6 mx-auto">
          <div class="title">
            <span>中国</span>
            <span>智造</span>
          </div>
          <div class="hr"></div>
          <div class="text">
            <p>没有强烈的色彩对比 也无需夸张的图案造型 一点几何图形 加上亮丽的色彩 便为无底色的家 注入了更多的鲜活</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="container top">
      <div class="row">
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">关于我们</span>
          <a href="#">公司简介</a>
          <a href="#">文化产品</a>
          <a href="#">发展历程</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">产品中心</span>
          <a href="#">现代都市</a>
          <a href="#">折叠城市</a>
          <a href="#">清风物语</a>
          <a href="#">落落星辰</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">预约设计</span>
          <a href="#">精牌设计</a>
          <a href="#">设计申请</a>
          <a href="#">客服案例</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">新闻资讯</span>
          <a href="#">品牌咨询</a>
          <a href="#">热门观点</a>
          <a href="#">家居动态</a>
          <a href="#">精彩视频</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">服务平台</span>
          <a href="#">理念服务</a>
          <a href="#">服务支持</a>
          <a href="#">服务承诺</a>
          <a href="#">在线保修</a>
        </div>
        <div class="right col-xl-4 col-lg-4 col-md-4 col-sm-4 col-6   mx-auto">
          <span class="title">联系我们</span>
          <div class="info">
            <div class="item">
              <img src="./assets/footer_icon1.png" alt="">
              <span>河南省-郑州高新区-万仙山-万仙洞</span>
            </div>
            <div class="item">
              <img src="./assets/footer_icon2.png" alt="">
              <span>110-123456789</span>
            </div>
            <div class="item">
              <img src="./assets/footer_icon3.png" alt="">
              <span>www.110.com</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="container bottom">
      <div class="row">
        <div class="left col-lg-8 text-center text-lg-start">
          © 2017姿在家家居用品股份有限公司版权所有法 律 声 明 及 隐 私 权 政 策 · 知 识 产 权新ICP备 05003
        </div>
        <div class="right col-lg-4 text-center text-lg-start">
          <span>友情链接：</span><img src="./assets/footer_icons.png" alt="">
        </div>
      </div>
    </div>
  </footer>

  <script src="./bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>